<!--
- Author:  LiShibin.
- Date:    2019/1/24.
- File:    diameter.
-->
<template>
  <div>
    <div class="Web_Box">
      <div class="Topmenu"><i class="iconfont icon-youjiantou" @click="$utils.back()"><a href=""></a></i>
        <h1>分类</h1>
        <span></span>
      </div>
      <div class="zhijing" id="saixuan" style="margin-top:50px;">
        <ul>
          <li>
            <p>快速选择直径</p>
            <ul>
              <li v-for="(item, i) in diameterData" @click="getExact_select_diameter(i)" :class="{'on': i == showSign}">{{item}}</li>
            </ul>
          </li>
          <li>
            <p>精准选择直径</p>
            <ul>
              <li v-for="(item, i) in data" :class="{'on': chooseData.indexOf(item.goods_size) > -1}" @click="chooseDiameter(i, item.goods_size)">{{item.goods_size}}mm</li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="maintenance_upload_btn mt120" @click="summit">提交</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        diameterData: [],
        data: [],
        showSign: 1,
        diameterSign: '',
        chooseData: []
      }
    },
    created() {
      this.fast_select_diameter()
      this.getExact_select_diameter(1)
    },
    components: {},
    methods: {
      summit() {
        this.$router.replace({name: 'goods-list', params: {data: this.chooseData}})
      },
      getExact_select_diameter(key) {
        this.showSign = key
        this.$request.exact_select_diameter(key).then(data => {
          this.data = data
        }).catch(e => {
          this.$toast('数据获取失败')
        })
      },
      fast_select_diameter() {
        this.$request.fast_select_diameter().then(data => {
          this.diameterData = data
        }).catch(e => {
          this.$toast('数据获取失败')
        })
      },
      chooseDiameter(i, goods_size) {
        // this.chooseData[i] = goods_size
        if (this.chooseData.indexOf(goods_size) > -1) {
          this.chooseData.splice(this.chooseData.indexOf(goods_size), 1)
        } else {
          this.chooseData.push(goods_size)
        }
        console.log(this.chooseData)
      }
    }
  }
</script>

<style>
.on {
  color: rgba(227, 193, 67, 1)!important;
}
</style>
